<template>
  <div class="demo">
    <div class="demo-title">格式化展示</div>
    <div class="demo-content">
      <Space>
        <InputNumber
          v-model:value="value1"
          :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
        />
        <InputNumber
          v-model:value="value2"
          :min="0"
          :max="100"
          :formatter="(value) => `${value}%`"
          :parser="(value) => value.replace('%', '')"
        />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Space from '@sscd/space';
  import InputNumber from '@sscd/input-number';
  const value1 = ref<number>(1000);
  const value2 = ref<number>(100);
</script>
